{% extends "base.html" %}
{% from "_icones.html" import icone %}
{% block titulo %}Usuários{% endblock %}
{% block conteudo %}
<div class="topo">
  <div><h1>Usuários e permissões</h1>
    <p>{% if usuarios %}Cada pessoa entra com o próprio login. Tudo o que é alterado fica registrado na <a href="{{ url_for('auditoria') }}">auditoria</a>.
      {% else %}Hoje o sistema abre sem senha. Cadastre o primeiro usuário (ele será o administrador) para passar a exigir login.{% endif %}</p></div>
  <div class="acoes"><a class="btn" href="{{ url_for('auditoria') }}">{{ icone('olho') }} Auditoria</a></div>
</div>

<div class="cartao">
  <div class="cab"><h2>{{ icone('clientes') }} Usuários</h2><span class="peq suave">{{ usuarios|length }}</span></div>
  {% if usuarios %}
  <div class="tabela-wrap"><table class="tab">
    <thead><tr><th>Nome</th><th>Login</th><th>Papel</th><th>Situação</th><th>Último acesso</th><th></th></tr></thead>
    <tbody>{% for u in usuarios %}
      <tr><td><b>{{ u.nome }}</b></td><td class="mono">{{ u.login }}</td><td>{{ PAPEIS[u.papel] }}</td>
        <td>{% if u.ativo %}<span class="selo ok">Ativo</span>{% else %}<span class="selo neutro">Desativado</span>{% endif %}</td>
        <td class="nowrap peq">{{ u.ultimo_acesso or '—' }}</td>
        <td><button class="btn peq" type="button" onclick="document.getElementById('dlg-u{{ u.id }}').showModal()">{{ icone('editar') }} Alterar</button>
          <dialog id="dlg-u{{ u.id }}"><form method="post">
            <input type="hidden" name="acao" value="alterar"><input type="hidden" name="id" value="{{ u.id }}">
            <div class="cab"><h2>Alterar {{ u.login }}</h2></div>
            <div class="corpo"><div class="campos">
              <div class="c12"><label>Nome</label><input name="nome" value="{{ u.nome }}" required></div>
              <div class="c6"><label>Papel</label><select name="papel">{% for k, v in PAPEIS.items() %}<option value="{{ k }}" {{ 'selected' if u.papel == k }}>{{ v }}</option>{% endfor %}</select></div>
              <div class="c6"><label class="check" style="margin-top:22px"><input type="checkbox" name="ativo" value="1" {{ 'checked' if u.ativo }}> Ativo</label></div>
              <div class="c12"><label>Nova senha <span class="opc">(deixe em branco para manter)</span></label><input name="senha" type="password" minlength="8" autocomplete="new-password"></div>
            </div></div>
            <div class="rodape-form"><button class="btn" type="button" onclick="this.closest('dialog').close()">Cancelar</button><button class="btn prim">Salvar</button></div>
          </form></dialog></td></tr>{% endfor %}</tbody></table></div>
  {% endif %}
  <form method="post" class="corpo">
    <input type="hidden" name="acao" value="criar">
    <div class="secao-titulo" style="margin-top:0">{{ 'Novo usuário' if usuarios else 'Primeiro usuário (administrador)' }}</div>
    <div class="campos">
      <div class="c4"><label>Nome</label><input name="nome" required></div>
      <div class="c3"><label>Login</label><input name="login" required minlength="3" pattern="\S+" autocomplete="off"></div>
      <div class="c3"><label>Papel</label><select name="papel" {{ 'disabled' if not usuarios }}>{% for k, v in PAPEIS.items() %}<option value="{{ k }}" {{ 'selected' if k == ('emissor' if usuarios else 'admin') }}>{{ v }}</option>{% endfor %}</select></div>
      <div class="c2"></div>
      <div class="c4"><label>Senha <span class="opc">(mín. 8 caracteres)</span></label><input name="senha" type="password" required minlength="8" autocomplete="new-password"></div>
      <div class="c4"><label>Repita a senha</label><input name="senha2" type="password" required minlength="8" autocomplete="new-password"></div>
      <div class="c4" style="align-self:end"><button class="btn prim" style="width:100%">{{ icone('mais') }} Cadastrar</button></div>
      <div class="c12 ajuda"><b>Administrador</b>: tudo, inclusive configurações, certificado, usuários e inutilização.
        <b>Emissor</b>: emite, cancela e cadastra; vê as configurações sem alterar. <b>Consulta</b>: só visualiza e baixa notas e relatórios.</div>
    </div>
  </form>
</div>
{% endblock %}